//画布
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

//按钮
const eraserBtn = document.getElementById('eraser');
const paintBtn = document.getElementById('paint');
const deepBtn = document.getElementById('deep');
const blurBtn = document.getElementById('blur');
const oldBtn = document.getElementById('old');

//网页窗口变化
WatchWindowChange(canvas);
function WatchWindowChange(canvas) {
  //动态设置宽高
  windowChange();

  //监听窗口大小
  window.onresize = function () {
    windowChange();
  };
  //封装函数
  function windowChange() {
    let pageWidth = document.documentElement.clientWidth;
    let pageHeight = document.documentElement.clientHeight;
    canvas.width = pageWidth;
    canvas.height = pageHeight;
  }
}

//设置绘画开启结束标志
let isPaint = false;
let lastPoint = { x: undefined, y: undefined };

//画线
function drawLine(x1, y1, x2, y2) {
  //绘制操作
  context.beginPath();
  context.moveTo(x1, y1); //起点
  context.lineWidth = lineWidth; //宽度
  context.lineTo(x2, y2); //终点
  context.strokeStyle = startColor;
  context.stroke();
  context.lineCap = 'round'; //端点画圆
  context.lineJoin = 'bevel';
  context.closePath(); //闭合
}

//判断移动端或网页
eventListen(canvas);
function eventListen(canvas) {
  const isMobile = 'ontouchstart' in window ? true : false;
  const tapStart = isMobile ? 'touchstart' : 'mousedown';
  const tapMove = isMobile ? 'touchmove' : 'mousemove';
  const tapEnd = isMobile ? 'touchend' : 'mouseup';

  canvas.addEventListener(tapStart, (e) => {
    const x = isMobile ? e.targetTouches[0].pageX : e.clientX;
    const y = isMobile ? e.targetTouches[0].pageY : e.clientY;
    isPaint = true;
    if (isUseEraser) {
      context.clearRect(
        x - eraserSize / 2,
        y - eraserSize / 2,
        eraserSize,
        eraserSize
      );
    } else {
      lastPoint = { x: x, y: y };
      drawLine(lastPoint.x, lastPoint.y, lastPoint.x, lastPoint.y);
    }
  });

  canvas.addEventListener(tapMove, (e) => {
    const x = isMobile ? e.targetTouches[0].pageX : e.clientX;
    const y = isMobile ? e.targetTouches[0].pageY : e.clientY;
    if (!isPaint) return;
    if (isUseEraser) {
      context.clearRect(
        x - eraserSize / 2,
        y - eraserSize / 2,
        eraserSize,
        eraserSize
      );
    } else {
      let newPoint = { x: x, y: y };
      drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
      lastPoint = newPoint; //实时更新新旧xy坐标
    }
  });

  canvas.addEventListener(tapEnd, () => {
    isPaint = false;
  });
}


//清空画布
bin.addEventListener('click', () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

//下载图片
download.addEventListener('click', () => {
  result = window.confirm('确认下载图片？');
  if (result) {
    let image = new Image();
    image.src = canvas.toDataURL({
      format: 'image/png',
      quality: 1,
      width: 14000,
      height: 4000,
    });
    var url = image.src.replace(
      /^data:image\/[^;]/,
      'data:application/octet-stream'
    );
    window.open(url);
    return image;
  }
});

// 风格选择
//深色效果
let isShowDeep = false;
deepBtn.addEventListener('click', () => {
  isShowDeep = !isShowDeep;
  if (isShowDeep) {
    context.filter = 'brightness(72%)';
  } else {
    context.filter = 'none';
  }
});

//高斯模糊
let isShowBlur = false;
blurBtn.addEventListener('click', () => {
  isShowBlur = !isShowBlur;
  if (isShowBlur) {
    context.filter = 'blur(8px)';
  } else {
    context.filter = 'none';
  }
});

//复古色
let isShowOld = false;
oldBtn.addEventListener('click', () => {
  isShowOld = !isShowOld;
  if (isShowOld) {
    context.filter = 'sepia(40%)';
  } else {
    context.filter = 'none';
  }
});

//撤销、恢复功能
const undo = document.querySelector('#undo');
const redo = document.querySelector('#redo');
let undoStack = [],
  redoStack = [],
  // 保存当前画布
  currentImg = context.getImageData(0, 0, canvas.width, canvas.height);

canvas.addEventListener('mouseup', () => {
  //每画一笔记录一次当前画布
  undoStack.push(currentImg);
  currentImg = context.getImageData(0, 0, canvas.width, canvas.height);
});

undo.addEventListener('click', () => {
  if (!undoStack.length) {
    return;
  }
  currentImg = context.getImageData(0, 0, canvas.width, canvas.height);
  context.putImageData(undoStack.pop(), 0, 0); // 渲染画布
  redoStack.push(currentImg); //redoStack保存当前画布，以被恢复使用
});

redo.addEventListener('click', () => {
  if (!redoStack.length) {
    return;
  }
  context.putImageData(redoStack.pop(), 0, 0);
  undoStack.push(currentImg); //undoStack保存当前画布，以被撤销使用
});
